<!--
 * @Author: 273198238 2412069378@qq.com
 * @Date: 2025-03-15 15:16:09
 * @LastEditors: 273198238 2412069378@qq.com
 * @LastEditTime: 2025-03-17 18:21:35
 * @FilePath: \population\src\components\LeftBotton.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div id="leftbotton">
        
    </div>
</template>

<script>
import { mapState } from 'vuex';
import * as echarts from 'echarts';
export default {
    data() {
        return {
            indata: [],
            outdata: []
        }
    },
    methods: {
        initChart() {
            const myChart = echarts.init(document.getElementById('leftbotton'));
            let option = {
                title: {
                    text: '人口涌入流失对比图',
                    textStyle: {
                        color: '#fff'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    textStyle: {
                        color: '#fff'
                    },
                    top: "25px"
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '10%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01],
                    axisLine: {
                        lineStyle: {
                            color: '#fff'
                        }
                    }
                },
                yAxis: {
                    type: 'category',
                    data: ['北京', '上海', '广州', '深圳'],
                    axisLine: {
                        lineStyle: {
                            color: '#fff'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                series: [
                    {
                        name: '涌入',
                        type: 'bar',
                        data: this.indata
                    },
                    {
                        name: '流失',
                        type: 'bar',
                        data: this.outdata
                    }
                ]
            };
            myChart.setOption(option);

        },

    },
    mounted() {
        this.initChart();
    },
    computed: {
        ...mapState(['populationData'])
},
    watch: {
        populationData:{
            deep: true,
            // immediate: true,
            handler(newVal, oldVal) {
                // 北京
                if(this.indata.length < 4){
                    this.indata.push(newVal[0].inflow)
                this.outdata.push(newVal[0].outflow)
                this.indata.push(newVal[1].inflow)
                this.outdata.push(newVal[1].outflow)
                this.indata.push(newVal[2].inflow)
                this.outdata.push(newVal[2].outflow)
                this.indata.push(newVal[3].inflow)
                this.outdata.push(newVal[3].outflow)
                this.initChart();
                }else{
                    this.indata = [],
                    this.outdata = [],
                    this.indata.push(newVal[0].inflow)
                this.outdata.push(newVal[0].outflow)
                this.indata.push(newVal[1].inflow)
                this.outdata.push(newVal[1].outflow)
                this.indata.push(newVal[2].inflow)
                this.outdata.push(newVal[2].outflow)
                this.indata.push(newVal[3].inflow)
                this.outdata.push(newVal[3].outflow)
                    this.initChart();

                    

}
            }
        }
    }
}
</script>

<style lang="less" scoped>
#leftbotton {
    width: 100%;
    height: 100%;
}
</style>